<template>
	<view>
		<dsl-navbar title="配件" isBack="true" bgTopImg="white"></dsl-navbar>
		<view class="flex">
			<scroll-view scroll-y="true" style=" width: 300rpx;" :style="{'height':HEIGHT+'px'}">
				<view v-for="(item,index) in goods" :key='index' @click="regionDataMen(item,index)">
					<view class="scroll_name" :class="{scroll_name_active:index== regionDataIndex}">
						<view class="scroll_text">{{item.name}}</view>
					</view>
				</view>
			</scroll-view>
			<scroll-view scroll-y="true" :style="{'height':HEIGHT+'px'}" class="scroll_right">
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper_image">
					<swiper-item v-for="(item,index) in 3" :key='index' class="swiper_image">
						<image src="../../static/home/icon_capus.png" mode="aspectFill" class="swiper_image"></image>
					</swiper-item>
				</swiper>
				<view class="text-center padding">
					_________ 精选 _________
				</view>
				<view v-if="goodsList &&goodsList.length !=0">
					<view v-for="(item,index) in goodsList" :key='index' @click="regionsMen(item,index)"
						class="good_list">
						<view>
							<image :src="urls+item.image" mode="aspectFill"></image>
						</view>
						<view class="good_list_right">
							<view class="title towlineshow">{{item.name}}</view>
							<view class="good_list_bottom">
								<view>{{item.stock}}</view>
								<view class="text-red">￥{{item.price}}</view>
							</view>
						</view>
					</view>
				</view>
				<view v-else class="text-center padding text-gray text-sm">
					暂无
				</view>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	import {
		getTypeLists, //分类列表
		getList, //商品
		urls
	} from '@/common/path.js';
	export default {
		data() {
			return {
				urls:urls,
				isWarp:true,//弹窗显示状态
				goodList: [{
						title: '商品名称啊大大',
						image: 'https://img1.baidu.com/it/u=3063208540,4016808991&fm=26&fmt=auto&gp=0.jpg',
						num: '111人已付款',
						pay: '200'
					},
					{
						title: '商品名称啊大大',
						image: 'https://img1.baidu.com/it/u=3063208540,4016808991&fm=26&fmt=auto&gp=0.jpg',
						num: '111人已付款',
						pay: '200'
					},
					{
						title: '商品名称啊大大',
						image: 'https://img1.baidu.com/it/u=3063208540,4016808991&fm=26&fmt=auto&gp=0.jpg',
						num: '111人已付款',
						pay: '200'
					}
				],

				goods: [],
				//默认选择左侧列表
				regionDataIndex: 0,
				//分类id
				type_id: '',
				// 商品列表
				goodsList: []
			}
		},
		onLoad() {
			this.getProductType() //分类

		},
		watch:{
			regionDataIndex(i){
				this.type_id =  this.goods[i].id
				this.getList()
			}
		},
		computed: {
			HEIGHT() {
				return uni.getSystemInfoSync().windowHeight
			}
		},
		methods: {
			//产品分类
			getProductType() {
				const _this = this
				_this.Http.POST(getTypeLists, {})
					.then((res) => {
						// console.log('[产品分类]', res);
						if (res.code == 1) {
							this.goods = res.data
							this.type_id = res.data[0].id
							this.getList()
						}
					})
			},
			//商品列表
			getList() {
				let data = {
					type_id: this.type_id,
					page: 1,
					pagenum: 999999
				}
				this.Http.POST(getList, data)
					.then((res) => {
						if (res.code = 1) {
							// console.log('[商品]', res);
							this.goodsList = res.data
						} else {
							this.goodsList = []
						}
					})
			},
			//选择省
			regionDataMen(item, index) {
				this.regionDataIndex = index
				// this.regions = regionData[index].id
			},
			//选择市
			regionsMen(item, index) {
				uni.navigateTo({
					url: 'goodsdetail?id='+item.id
				})
			}
		}
	}
</script>

<style lang="scss">
	.scroll_name {
		background-color: #EEEEEE;
		text-align: center;
		height: 88rpx;
		line-height: 88rpx;
		border-left: 10rpx solid #EEEEEE;
	}

	.scroll_name_active {
		border-left: 10rpx solid #007AFF !important;
		font-weight: bold;
		background-color: white;
	}


	.swiper_image {
		height: 240rpx;
		border-radius: 10rpx;
	}

	.scroll_right {
		padding: 30rpx;
	}

	.good_list {
		border: 1rpx solid #EEEEEE;
		padding: 30rpx;
		display: flex;
		position: relative;

		image {
			height: 150rpx;
			width: 150rpx;
			border: 9rpx;
		}

		.good_list_right {
			margin-left: 20rpx;

			.good_list_bottom {
				display: flex;
				justify-content: space-between;
				position: absolute;
				bottom: 30rpx;
			}
		}

	}
	
</style>
